import './Scss/MixingStation.scss'
import { Column, Gauge } from '@ant-design/plots'
import { useEffect, useRef, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest } from 'ahooks'
import { TitleSmall001 } from '../Common/SmallTitle'
import { WebTemplateUrl } from './configuration'
import { FrontModalBox } from '../Modal'

const { hostname } = window.location

const Data = [
    {
        uuid: 1,
        label: '沥青拌合站',
        color: 'rgb(241, 214, 130)',
        title: '沥青产量 (kg)',
        charts: 9,
        type: 'AsphaltMixingStationDetail',
        typeTow: 'GettAsphaltMixingStationDetail',
        child: [
            { uuid: 1, label: '出料温度预警', img: 'ba005.png', value: 'temperature' },
            { uuid: 2, label: '油石比预警', img: 'ba003.png', value: 'asphaltratio' },
            { uuid: 3, label: '4.75mm通过率', charts: 'sieve475' },
        ],
    },
    {
        uuid: 2,
        label: '水泥拌合站',
        color: 'rgb(130, 224, 241)',
        title: '水泥产量 (m³)',
        charts: 8,
        type: 'CementMixingStationExceededDatil',
        typeTow: 'CementMixingStationGroupDetail',
        child: [
            { uuid: 1, img: 'ba001.png' },
            { uuid: 2, label: '水泥用量预警', img: 'ba003.png', value: 'cement' },
            { uuid: 3, label: '水胶比', charts: 'waterbinderratio' },
        ],
    },
]

const GaugeChartsSetUp = percent => {
    return {
        autoFit: false,
        height: 120,
        width: 220,
        percent,
        radius: 0.9,
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
        indicator: null,
        statistic: {
            title: {
                offsetY: 0,
                style: { fontSize: '50px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
            },
        },
        gaugeStyle: { lineCap: 'round' },
    }
}

const ColumnCharts = (size, data) => {
    const { width, height } = size
    return {
        autoFit: false,
        width,
        height,
        maxColumnWidth: 14,
        appendPadding: 24,
        data,
        isGroup: true,
        xField: 'type',
        yField: 'value',
        seriesField: 'name',
        color: ['#B2FBFD', '#FAD688'],
        legend: {
            layout: 'horizontal',
            position: 'top-right',
            offsetY: 24,
            itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
        },
        xAxis: {
            label: { style: { fill: '#B2FBFD' } },
            line: { style: { stroke: '#B2FBFD' } },
            tickLine: { style: { stroke: '#B2FBFD' } },
        },
        yAxis: {
            title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
            tickCount: 5,
            label: { style: { fill: '#B2FBFD' } },
            grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
        },
        scrollbar: {
            type: 'horizontal',
            categorySize: 200,
            style: {
                thumbColor: 'rgba(0, 60, 200, 0.4)',
                trackColor: 'rgba(0, 0, 0, 0.4)',
                thumbHighlightColor: 'rgba(0, 60, 200, 1)',
            },
        },
    }
}

export const MixingStation001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [DataOne, setDataOne] = useState()
    const [ChartsOne, setChartsOne] = useState()
    const [ChartsTwo, setChartsTwo] = useState()

    const [OptionsCall, setOptionsCall] = useState()

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setDataOne(res) })
    // 水泥
    const { run: InfoByOrg8 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ tableName, planCementConcrete, quantityAct, uuid, per }) => {
                data = [
                    ...data,
                    { name: '实际产量', type: tableName, value: quantityAct, uuid },
                    { name: '计划产量', type: tableName, value: planCementConcrete, uuid },
                ]
            })
            setChartsOne(data)
        },
    })
    // 沥青
    const { run: InfoByOrg9 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ tableName, planBitulith, quantityAct, uuid, per }) => {
                data = [
                    ...data,
                    { name: '实际产量', type: tableName, value: quantityAct, uuid },
                    { name: '计划产量', type: tableName, value: planBitulith, uuid },
                ]
            })
            setChartsTwo(data)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getExceededGroupInfo' })

        if (hostname.includes('jszx')) {
            InfoByOrg8({ url: `getCementMixingStationGroupInfo` })
            InfoByOrg9({ url: `getAsphaltMixingStationGroupInfo` })
        } else {
            InfoByOrg8({ url: `getGetCementMixingStationGroupInfoByOrg`, data: { OrganizationGroupCode: 8 } })
            InfoByOrg9({ url: `getAsphaltMixingStationGroupInfoByOrg`, data: { OrganizationGroupCode: 9 } })
        }
    }, [InfoByOrg8, InfoByOrg9, runAsync])
    return (
        <div className="MixingStation001">
            {DataOne &&
                Data.map(({ uuid, label, title, color, charts, type, typeTow, child }) => (
                    <div key={uuid} className="Box">
                        <div>{label}</div>
                        <div style={{ color }}>
                            {child.map(({ uuid, img, label, charts, value }) => (
                                <div
                                    key={uuid}
                                    onClick={() => {
                                        if (label) {
                                            setOptionsCall({
                                                type: 'TableList',
                                                data: { title: `${label}明细`, type, uuid: value || charts },
                                            })
                                        }
                                    }}
                                >
                                    {charts && (
                                        <div className="Charts">
                                            <Gauge {...GaugeChartsSetUp(Number(DataOne[charts]))} />
                                        </div>
                                    )}
                                    {img && <img src={WebTemplateUrl + img} alt="" />}
                                    {label && <div className="Lable">{label}</div>}
                                    {label && !charts && <div className="Number">{Number(DataOne[value])}</div>}
                                </div>
                            ))}
                        </div>
                        <TitleSmall001 title={title} />
                        <div ref={ChartsBox}>
                            {size && ChartsOne && ChartsTwo && (
                                <Column
                                    {...ColumnCharts(size, charts === 8 ? ChartsOne : ChartsTwo)}
                                    onReady={plot =>
                                        plot.on('plot:click', e => {
                                            const { x, y } = e
                                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                            setOptionsCall({
                                                type: 'TableList',
                                                data: {
                                                    title: charts === 8 ? '水泥拌合站生产明细' : '沥青拌合站生产明细',
                                                    type: typeTow,
                                                    uuid: data?.uuid,
                                                },
                                            })
                                        })
                                    }
                                />
                            )}
                        </div>
                    </div>
                ))}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
